<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-04-09 11:36:55
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-29 11:26:15
 * @FilePath: /XMate-h5/src/views/badge/components/deviceInfoView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="flex flex-row px-5 py-6 text-gray-600 text-sm rounded-lg bg-gradient-to-b from-[#E9F1FF] to-[#F5F9FF]"
  >
    <div class="flex flex-row items-center w-full">
      <img src="@/icons/svg/badge/badge_device.svg" class="w-[40px] mr-4" />

      <div class="flex flex-col gap-2">
        <div class="flex flex-row items-center gap-2">
          <h4 class="text-[14px] font-bold text-black">智能工牌</h4>
          <p
            :class="`text-center text-xs px-2 rounded-sm ${
              deviceInfo.online ? 'text-green-500' : 'text-red-500'
            } ${deviceInfo.online ? 'bg-green-100' : 'bg-red-100'}`"
          >
            {{ deviceInfo.online ? "在线" : "离线" }}
          </p>
        </div>

        <p class="text-[12px]">序列号：{{ deviceInfo.snCode }}</p>
      </div>
    </div>
    <BatteryView :battery-level="deviceInfo.batteryPer" />
  </div>
  <!-- <p>{{ deviceInfo.snCode }}</p> -->
</template>

<script setup lang="ts">
import { defineProps, defineEmits, PropType, computed } from "vue";
import { BadgeDeviceInfo } from "@/services/badge/type";
import BatteryView from "./batteryView.vue";

const emits = defineEmits(["clickChangeBtn", "clickUnbindBtn"]);

const props = defineProps({
  deviceCode: {
    type: String,
    default: "",
  },
  deviceInfo: {
    type: Object as PropType<BadgeDeviceInfo>,
    default: () => ({}),
  },
});
</script>

<style scoped lang="less">
.badge-container {
  --van-button-large-height: 44px;
}
</style>
